import { Handle, Position } from "reactflow";
import "./AINode.css";

interface AINodeProps {
  data: {
    label: string;
    config?: {
      modelName?: string;
      temperature?: number;
    };
  };
  selected: boolean;
}

function AINode({ data, selected }: AINodeProps) {
  const modelName = data.config?.modelName || "未选择模型";

  return (
    <div className={`ai-node ${selected ? "selected" : ""}`}>
      {/* 左侧输入连接点 */}
      <Handle
        type="target"
        position={Position.Left}
        id="target-left"
        className="ai-handle-left"
      />

      <div className="ai-node-content">
        <div className="ai-node-label">{data.label}</div>
        <div className="ai-node-details">
          <div className="ai-node-detail">
            <span className="ai-node-detail-label">模型:</span>
            <span>{modelName}</span>
          </div>
          {data.config?.temperature !== undefined && (
            <div className="ai-node-detail">
              <span className="ai-node-detail-label">温度:</span>
              <span>{data.config.temperature}</span>
            </div>
          )}
        </div>
      </div>

      {/* 右侧输出连接点 */}
      <Handle
        type="source"
        position={Position.Right}
        id="source-right"
        className="ai-handle-right"
      />
    </div>
  );
}

export default AINode;
